<template>
    <div class="home">
        <header>
            <div class="header_img">xxxx</div>
        </header>
        <!-- 查询条件 -->
        <div class="search_box">
            <el-input placeholder="请输入内容" v-model="inputOne" style="width: 200px;">
            </el-input>
            <el-date-picker v-model="valueTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left: 15px;">
            </el-date-picker>
            <el-button type="primary" style="margin-left: 15px;" @click="search()">查询</el-button>
        </div>
        <div class="content">
            <div>
                <left ref="leftRef" :inputOneP="inputOneP" :valueTimeP="valueTime"></left>
            </div>
            <div>
                <middle></middle>
            </div>
            <div>
                <right ref="rightRef"></right>
            </div>
        </div>
    </div>
</template>

<script>
import left from "./left";
import right from "./right";
import middle from "./middle";
export default {
    data() {
        return {
            inputOne: "",
            valueTime: "",
            inputOneP:"",
        }
    },
    components: { left, right, middle },
    watch: {},
    activated() { },
    created() { },
    methods: {
        search() {
            this.inputOneP = this.inputOne;
            // console.log("inputOne", this.inputOne, this.valueTime);
            this.$nextTick(()=>{
                this.$refs.rightRef.init(this.inputOne,this.valueTime)
            })

        }
    },
    mounted() { }
}
</script>

<style lang='scss' scoped>
.home {
    width: 100vw;
    height: 100vh;
    /* background: red; */
    background-image: url("@/assets/u2.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    /* overflow-x: hidden; */
    overflow: hidden;
    // box-sizing: border-box;
}

header {
    padding-top: 1.25rem;
    text-align: center;
    color: white;
    font-size: 1.75rem;
    height: 1.875rem;
}

.header_img {
    width: 100%;
    height: 1.875rem;
    background-image: url("@/assets/u4.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.search_box {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    height: 3.125rem;
}

.content {
    // margin-top: 1.25rem;
    border: 1px solid red;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    height: calc(100vh - 1.875rem - 3.125rem - .625rem - 1.25rem);
    // height: 500px;
    color: #fff;
}

.content>div {
    border: 1px solid red;
    width: 25%;
}

.content>div:nth-child(2) {
    width: 38%;
    /* flex: 1; */
}
</style>
<style scoped>
.search_box /deep/ .el-input__inner,
.search_box /deep/ .el-date-editor .el-range-input,
.search_box /deep/ .el-date-editor .el-range-separator {
    background: transparent;
    color: #fff;
}
</style>
